<template>
  <div class="deadline-select-wrap">
    <el-form-item v-if="!isExhibition" :prop="moduleName + '.date'" class="date">
      <div :class="{'mobile-deadline-box': showMobilePage}" style="display: flex;">
        <el-date-picker
          v-model="selectData.date"
          type="daterange"
          range-separator="-"
          value-format="timestamp"
          size="small"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy/MM/dd"
          @change="dateChange"
        />
        <div class="tip-right">期数：{{ rangeTime }}</div>
      </div>

    </el-form-item>
    <!-- <el-form-item v-if="!isExhibition" :prop="moduleName + '.period'" class="period">
      <el-input
        v-model="selectData.period"
        oninput="if(value>999999999999)value=999999999999"
        type="number"
        placeholder="期数"
      />
    </el-form-item> -->
    <div v-if="isExhibition" >
      <span v-if="selectData.date && selectData.date.length > 0">{{ selectData.date[0] / 1000 | standardFormat('YYYY/MM/DD') }} - {{ selectData.date[1] / 1000 | standardFormat('YYYY/MM/DD') }}</span>
      <span style="color: #666;">( {{ rangeTime }} 期 )</span>
    </div>
  </div>
</template>
<script>
import { standardFormat } from '@/filters/date';
import { mapState } from 'vuex';
export default {
  name: 'DeadlineSelect',
  filters: {
    standardFormat
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    isExhibition: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    rangeTime() {
      const licenseTime = this.selectData.date;
      if (licenseTime && licenseTime.length === 2) {
        const startTime = licenseTime[0];
        const endTime = licenseTime[1];
        return this.mathTime(startTime, endTime);
      }
      return '--';
    },
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    mathTime(startTime, endTime) {
      const start = this.getFullTime(startTime);
      const end = this.getFullTime(endTime);
      const diffYear = end.year - start.year;
      const diffMonth = end.month - start.month;
      return diffYear * 12 + diffMonth + 1;
    },
    getFullTime(time, diff = 0) {
      const timeDate = new Date(time + diff);
      const year = timeDate.getFullYear();
      const month = timeDate.getMonth() + 1;
      const day = timeDate.getDate(); // 几号
      return {
        year, month, day
      };
    },
    dateChange(value) {
      // const licenseTime = value;
      console.log(value);
      // let period = '';
      // if (licenseTime && licenseTime.length === 2) {
      //   const startTime = licenseTime[0];
      //   const endTime = licenseTime[1];
      //   period = this.mathTime(startTime, endTime);
      // }
      // this.selectData.period = period;
    }
  }
};
</script>
<style lang="scss" scoped>
.deadline-select-wrap {
  display: flex;
  position: relative;
  .tip-right {
    position: absolute;
    right: -70px;
    // margin-left: 10px;
  }
  .date {
    & ::v-deep {
      .el-input__inner {
        width: 240px;
        min-width: unset;
        padding-right: 0;
        padding-left: 25px;
      }
    }
  }
  // .period {
  //   & ::v-deep {
  //     .el-input__inner {
  //       width: 76px;
  //       min-width: unset;
  //     }
  //   }
  // }
}
.mobile-deadline-box {
  flex-wrap: wrap;
  .tip-right {
    position: unset;
  }
}
</style>
